<template>
    <button @click="start">start</button>
    <button @click="pause">pause</button>
    <button @click="disabled = true">disabled</button>
    <div>
        <VueDraggable ref="el" v-model="list" :disabled="disabled" :animation="150" ghostClass="ghost"
            class="listBox flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded" @start="onStart"
            @update="onUpdate">
                <div v-for="item in list" :key="item.id" class="item">{{ item.name }}</div>
        </VueDraggable>
        <preview-list :list="list" />
    </div>
</template>
  
<script setup lang="ts">
import { ref } from 'vue';

import { VueDraggable } from 'vue-draggable-plus';

const list = ref([
    {
        name: 'Joao',
        id: 1
    },
    {
        name: 'Jean',
        id: 2
    },
    {
        name: 'Johanna',
        id: 3
    },
    {
        name: 'Juan',
        id: 4
    },
    {
        name: 'Chen',
        id: 5
    },
    {
        name: 'Wang',
        id: 6
    },
    {
        name: 'Shan',
        id: 7
    },
    {
        name: 'Han',
        id: 8
    }
])

const el = ref();
const disabled = ref(false);

const pause = () => {
    el.value?.pause()
};

const start = () => {
    el.value?.start()
};

const onStart = () => {
    console.log('start')
};

const onUpdate = () => {
    console.log('update')
};

</script>
  
<style scoped lang="scss">
.ghost {
    opacity: 0.5;
    background: #c8ebfb;
}
.listBox{
    display: flex;
    width: 560px;
    flex-wrap: wrap;
    box-sizing: border-box;
    border: 1px solid #ccc;
    .item{
        width: 250px;
        border: 1px solid #ccc;
        height: 50px;
        line-height: 50px;
        margin: 10px;
        box-sizing: border-box;
        cursor: move;
    }
}
</style>
  